<template>
  <div>
    <div class="mb_10">
      <i class="el-icon-arrow-left commhover" @click="back"></i>
      <span class="textunder ccolor commhover f-13" @click="back"
        >活动名称（点击返回上一级）</span
      >
      <span class="ccolor f-13"> / 活动数据</span>
    </div>
    <div class="full-w listbody">
      <div class="bg_fff p_20">
        <div class="f-18 fw c_000 mb_20">数据总览</div>
        <div style="padding:0 10px">
          <el-row :gutter="20" class="mb_20 bg_f8">
            <el-col :span="6">
              <div class="itembox flex justifycenter">
                <div class="flex full_w inneritem aligncenter justifycenter">
                  <img src="@/assets/images/list1.png" alt="" class="iconimg mr_15">
                  <div class="flexcolumn contentitem">
                    <div class="f-22 c_000 hiddentext mb_5">{{draw.fw_num||0}}</div>
                    <div class="f-14 c_7e">
                      访问量
                      <el-tooltip class="item" effect="dark" content="访问量：活动发布至今日活动累计访问次数" placement="top-end">
                        <i class="el-icon-info"></i>
                      </el-tooltip>
                    </div>
                  </div>
                </div>
              </div>
              <!-- <div class="flexcolumn aligncenter justifycenter boxdata">
                  <div class="f-16 c_000 mb_20">
                    访问量
                    <el-tooltip class="item" effect="dark" content="访问量：活动发布至今日活动累计访问次数" placement="top-end">
                      <i class="el-icon-info"></i>
                    </el-tooltip>
                  </div>
                  <div class="f-36 c_000">{{draw.fw_num||0}}</div>
              </div> -->
            </el-col>
            <el-col :span="6">
              <div class="itembox flex justifycenter">
                <div class="flex full_w inneritem aligncenter justifycenter">
                  <img src="@/assets/images/list2.png" alt="" class="iconimg mr_15">
                  <div class="flexcolumn contentitem">
                    <div class="f-22 c_000 hiddentext mb_5">{{draw.draw_num||0}}</div>
                    <div class="f-14 c_7e">
                      抽奖次数
                      <el-tooltip class="item" effect="dark" content="访问量：活动发布至今日活动累计抽奖次数" placement="top-end">
                        <i class="el-icon-info"></i>
                      </el-tooltip>
                    </div>
                  </div>
                </div>
              </div>
              <!-- <div class="flexcolumn aligncenter justifycenter boxdata">
                  <div class="f-16 c_000 mb_20">抽奖次数
                    <el-tooltip class="item" effect="dark" content="访问量：活动发布至今日活动累计抽奖次数" placement="top-end">
                      <i class="el-icon-info"></i>
                    </el-tooltip>
                  </div>
                  <div class="f-36 c_000">{{draw.draw_num||0}}</div>
              </div> -->
            </el-col>
            <el-col :span="6">
              <div class="itembox flex justifycenter">
                <div class="flex full_w inneritem aligncenter justifycenter">
                  <img src="@/assets/images/list3.png" alt="" class="iconimg mr_15">
                  <div class="flexcolumn contentitem">
                    <div class="f-22 c_000 hiddentext mb_5">{{draw.draw_user_num||0}}</div>
                    <div class="f-14 c_7e">
                      抽奖人数
                      <el-tooltip class="item" effect="dark" content="访问量：活动发布至今日活动累计抽奖人数" placement="top-end">
                        <i class="el-icon-info"></i>
                      </el-tooltip>
                    </div>
                  </div>
                </div>
              </div>
              <!-- <div class="flexcolumn aligncenter justifycenter boxdata">
                  <div class="f-16 c_000 mb_20">抽奖人数
                    <el-tooltip class="item" effect="dark" content="访问量：活动发布至今日活动累计抽奖人数" placement="top-end">
                      <i class="el-icon-info"></i>
                    </el-tooltip>
                  </div>
                  <div class="f-36 c_000">{{draw.draw_user_num||0}}</div>
              </div> -->
            </el-col>
            <el-col :span="6">
              <div class="itembox flex justifycenter">
                <div class="flex full_w inneritem aligncenter justifycenter">
                  <img src="@/assets/images/list4.png" alt="" class="iconimg mr_15">
                  <div class="flexcolumn contentitem noborder">
                    <div class="f-22 c_000 hiddentext mb_5">{{draw.draw_win_num||0}}</div>
                    <div class="f-14 c_7e">
                      中奖次数
                      <el-tooltip class="item" effect="dark" content="访问量：活动发布至今日活动累计中奖次数" placement="top-end">
                        <i class="el-icon-info"></i>
                      </el-tooltip>
                    </div>
                  </div>
                </div>
              </div>
              <!-- <div class="flexcolumn aligncenter justifycenter boxdata">
                  <div class="f-16 c_000 mb_20">中奖次数
                    <el-tooltip class="item" effect="dark" content="访问量：活动发布至今日活动累计中奖次数" placement="top-end">
                      <i class="el-icon-info"></i>
                    </el-tooltip>
                  </div>
                  <div class="f-36 c_000">{{draw.draw_win_num||0}}</div>
              </div> -->
            </el-col>
          </el-row>
        </div>
      </div>
      <div class="bg_fff p_20 mt_10">
        <div class="f-18 fw c_000 mb_15">活动概况</div>
        <div style="padding:0 10px">
          <el-row :gutter="20" class="mb_20 bg_f8 pt_20">
            <el-col :span="12">
              <div class="hditem mb_20 f-14 c_000 pl_20">
                活动标题：{{detail.name||'-'}}
              </div>
              <div class="hditem mb_20 f-14 c_000 pl_20">
                活动时间：{{detail.draw_startime}} - {{detail.draw_endtime}}
              </div>
              <div class="hditem mb_20 f-14 c_000 pl_20">
                活动模板：{{detail.template?detail.template.name:'-'}}
              </div>
              <div class="hditem mb_20 f-14 c_000 pl_20">
                活动状态：<el-tag type="info" v-if="detail.status==0">未开始</el-tag>
                <el-tag type="success" v-if="detail.status==1" class="tag_success">进行中</el-tag>
                <el-tag type="danger" v-if="detail.status==4" >已结束</el-tag>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="hditem mb_20 f-14 c_000 pl_40">
                奖项明细：<span class="pr_15">已领：{{nums.is_use}}</span><span class="pr_15">剩余：{{nums.no_use}}</span><span class="pr_15">已核销：{{nums.is_destroy}}</span>
              </div>
              <div v-for="(item,index) in levelList" :key='index' class="hditem mb_20 f-14 c_000 pl_40">
                {{item.level_name}}（{{item.draw_name}}）：
                <span class="pr_10">已领：{{item.old_num}}</span>
                <span v-if="item.level==0&&item.is_limit==0">剩余：无限制</span>
                <span class="pr_10" v-else>剩余：{{item.num}}</span>
                <span class="pr_10">已核销：{{item.destroy_num}}</span>
              </div>
              <!-- <div class="hditem mb_20 f-14 c_000 pl_40">
                奖项等级（奖品名称）：<span class="pr_10">已领：4</span><span class="pr_10">剩余：4</span><span class="pr_10">已核销：4</span>
              </div>
              <div class="hditem mb_20 f-14 c_000 pl_40">
                奖项等级（奖品名称）：<span class="pr_10">已领：4</span><span class="pr_10">剩余：4</span><span class="pr_10">已核销：4</span>
              </div> -->
            </el-col>
          </el-row>
        </div>
      </div>
      <div class="bg_fff p_20 mt_10">
        <div class="f-18 fw c_000 mb_30">整体趋势</div>
        <div class="flexend aligncenter">
          <el-date-picker v-model="time" type="datetime" size="small" :picker-options="pickerOptions" value-format="yyyy-MM-dd HH:mm:ss" style="width:200px" clearable class="mr_15" placeholder="选择活动期间" @change="changeTime">
          </el-date-picker>
          <!-- <div class="c_606 mr_15">活动期间：</div> -->
          <div>
            <span class="c_606 f-14 commhover mr_15" :class="{'c_primary':active==1}" @click="changeType(1)">今日</span>
            <span class="c_606 f-14 commhover mr_15" :class="{'c_primary':active==2}" @click="changeType(2)">昨日</span>
            <span class="c_606 f-14 commhover mr_15" :class="{'c_primary':active==7}" @click="changeType(7)">最近七日</span>
          </div>
          <el-button type="primary" size="mini" icon="el-icon-download" @click="download">导出</el-button>
        </div>
        <div v-loading='loading'>
          <div class="chart" id="echart" style="height:400px;width: 100%" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from "echarts";
require("echarts/theme/macarons"); // echarts theme
import { taskDataInfo,taskList,drawInfo,chartDay,chartTime,chartTimeExport,chartDayExport} from '@/api/active'
import {getData} from '@/utils/ruoyi'

export default {
  data() {
    return {
      task_id:'',
      loading:false,
      draw:{
        draw_num:0,
        draw_user_num:0,
        draw_win_num:0,
        fw_num:0
      },
      detail:{},
      detailnum:{},

      nums:{},
      levelList:[],
      
      active:1,
      chart:null,
      lineChartData:{
        xData:[],
        actualData1: [],
        actualData2: [],
        actualData3: [],
        // actualData4: []
      },
      time:'',
      pickerOptions:{
        disabledDate(time) {
          return time.getTime() > Date.now();
        },
      }
    };
  },

  created() {
    let task_id = this.$route.query.id;
    if (task_id) {
      this.task_id = task_id;
    }
    this.getData()
    this.getInfo()
    this.drawInfo()
    this.getTjData()
  },

  mounted() {
    // this.$nextTick(() => {
    //   this.initChart();
    // });
  },
  methods: {

    drawInfo(){
      drawInfo({task_id:this.task_id}).then(res=>{
        this.nums = res.data.data
        this.levelList = res.data.list
      })
    },

    getInfo(){
      taskList({task_id:this.task_id}).then(res=>{
        this.detail = res.data
      })
    },
    
    getData(){
      taskDataInfo({task_id:this.task_id}).then(res=>{
        this.draw = res.data
      })
    },

    back(){
        this.$router.back()
    },

    changeType(type){
      console.log('type:',type)
      this.active = type
      this.time = ''
      this.getTjData()
    },

    getTjData(){
      let day = ''
      if(this.active == 1){
        day = getData(0)
        this.chartTime(day)
      }else if(this.active == 2){
        day = getData(-1)
        this.chartTime(day)
      }else if(this.active == 7){
        day = getData(0)
        this.chartDay(day)
      }
    },

    chartDay(day){
      this.loading = true
        chartDay({task_id:this.task_id,start:this.parseTime(day)}).then(res=>{
          let data = res.data
          let draw_num = [], draw_win_num = [],fw_num = [], xdata = [];
            xdata = Object.keys(data.draw_num).sort();
            xdata.forEach((x) => {
              for (let item in data.draw_num) {
                if (x == item) {
                  draw_num.push(data.draw_num[item]);
                }
              }
              for (let user in data.draw_win_num) {
                if (x == user) {
                  draw_win_num.push(data.draw_win_num[user]);
                }
              }
              for (let user in data.fw_num) {
                if (x == user) {
                  fw_num.push(data.fw_num[user]);
                }
              }
            });
            this.lineChartData.xData = xdata;
            this.lineChartData.actualData1 = draw_num;
            this.lineChartData.actualData2 = draw_win_num;
            this.lineChartData.actualData3 = fw_num;
            this.initChart();
            this.loading = false
        })
    },

    changeTime(){
      if(this.time){
        this.chartTime(this.time)
      }else{
        let day = ''
        if(this.active == 1){
          day = getData(0)
          this.chartTime(day)
        }else if(this.active == 2){
          day = getData(-1)
          this.chartTime(day)
        }else if(this.active == 7){
          day = getData(0)
          this.chartDay(day)
        }
      }
    },

    chartTime(time){
      console.log('time:',this.parseTime(time,'{y}-{m}-{d}'))
      chartTime({task_id:this.task_id,day: this.parseTime(time,'{y}-{m}-{d}')}).then(res=>{
        let data = res.data
        let draw_num = [], draw_win_num = [],fw_num = [], xdata = [];
        xdata = Object.keys(data.draw_num).sort();
        xdata.forEach((x) => {
          for (let item in data.draw_num) {
            if (x == item) {
              draw_num.push(data.draw_num[item]);
            }
          }
          for (let user in data.draw_win_num) {
            if (x == user) {
              draw_win_num.push(data.draw_win_num[user]);
            }
          }
          for (let user in data.fw_num) {
            if (x == user) {
              fw_num.push(data.fw_num[user]);
            }
          }
        });
        this.lineChartData.xData = xdata;
        this.lineChartData.actualData1 = draw_num;
        this.lineChartData.actualData2 = draw_win_num;
        this.lineChartData.actualData3 = fw_num;
        this.initChart();
        this.loading = false
      })
    },

    chartTimeExport(time){
      chartTimeExport({task_id:this.task_id,day:this.parseTime(time)}).then(res=>{
        let url = res.data
        this.$message.success("正在下载，请稍后");
        var a = document.createElement("a");
        a.setAttribute("href", url);
        a.click();
        this.exportloading = false
      })
    },

    download(){
      this.exportloading = true
      if(this.time){
        this.chartTimeExport(this.time)
        // chartTimeExport({task_id:this.task_id,day:this.parseTime(this.time)}).then(res=>{
        //   let url = res.data
        //   this.$message.success("正在下载，请稍后");
        //   var a = document.createElement("a");
        //   a.setAttribute("href", url);
        //   a.click();
        //   this.exportloading = false
        // })
      }else{
        let day = ''
        if(this.active == 1){
          day = getData(0)
          this.chartTimeExport(day)
        }else if(this.active == 2){
          day = getData(-1)
          this.chartTimeExport(day)
        }else if(this.active == 7){
          day = getData(0)
          chartDayExport({task_id:this.task_id,start:day}).then(res=>{
            let url = res.data
            this.$message.success("正在下载，请稍后");
            var a = document.createElement("a");
            a.setAttribute("href", url);
            a.click();
            this.exportloading = false
          })
        }
        
      }
    },

    initChart() {
      this.chart = echarts.init(document.getElementById('echart'), "macarons");
      this.setOptions();
    },

    setOptions() {
      this.chart.setOption({
        xAxis: {
          data: this.lineChartData.xData,
          boundaryGap: false,
          axisTick: {
            show: false,
          },
          axisLine: {
            lineStyle: {
              color: "#000",
            },
          },
          axisLabel: {
            textStyle: {
              color: "#000",
            },
          },
        },
        grid: {
          left: 10,
          right: 10,
          bottom: 20,
          top: 30,
          containLabel: true,
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
          },
          padding: [5, 10],
        },
        yAxis: {
          axisLine: {
            lineStyle: {
              color: "#000",
            },
          },
          axisLabel: {
            textStyle: {
              color: "#000",
            },
          },
          axisTick: {
            show: false
          }
        },
        legend: {
          data: ['访问量','抽奖次数','中奖次数']
        },
        series: [
          {
            name: '访问量',
            type: 'line',
            data: this.lineChartData.actualData3
          },
          {
            name: '抽奖次数',
            type: 'line',
            data: this.lineChartData.actualData1
          },
          {
            name: '中奖次数',
            type: 'line',
            data: this.lineChartData.actualData2
          }
        ],
      });
    }
  },
};
</script>
<style lang="scss" scoped>
.listbody {
  height: calc(100vh - 118px);
  overflow-y: auto;
  padding-bottom: 25px;
}
.boxdata{
  padding:15px 20px;

  // box-shadow: 0px 3px 20px 0px rgba(0, 98, 255, 0.5);
}
.full_h {
  height: 100%;
}
.bg_f8{
  background-color: #f8f8fB;
  border-radius: 8px;
}
.c_7e{
  color: #7E7E7E;
}
.iconimg{
  width: 57px;
  height: 57px;
}
.itembox{
  width: 100%;
  height: 100px;
  padding-top: 5px;
}
.inneritem{
  // width: 100;
  width: 100%;
  padding-left: 25px;
}
.contentitem{
  width: calc(100% - 60px);
  border-right: 1px solid #C7C7C7;
}
.noborder{
  border-right: 0;
}
.hiddentext{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>